<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/personal.css">
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
    <title>个人中心</title>
</head>
<body>
<header class="head">
    <span class="nav-tit">个人中心</span>
</header>
<main id="app">
    <div class="mui-content">
        <!--整体头像+背景-->
        <div class="tx">
            <label for="file">
                <input type="file" ref="front" id="file" style="display: none" @change="uploads($event)">
                <!--头像图片-->
                <img :src="front" alt="" class="txImg">
            </label>
            <!--网名-->
            <p class="wm" @click="upname">{{tx.name}}</p>
            <p class="wm">ID：{{tx.isDisable}}</p>
        </div>
        <!--我的收藏-->
        <a href="my_collect.html" class="outside">
            <!--收藏图片-->
            <div class="outside1">
                <img src="./images/icon_star.png" alt="" class="img1">
                <p>我的收藏</p>
            </div>
            <img src="./images/icon_more1.png" alt="" class="img2">
        </a>
        <!--分享软件-->
        <a href="share.html" class="outside">
            <div class="outside1">
                <!--分享软件图片-->
                <img src="./images/icon_share.png" alt="" class="img3">
                <p>分享软件</p>
            </div>
            <!--小箭头图片-->
            <img src="./images/icon_more1.png" alt="" class="img2">
        </a>
        <!--联系我们-->
        <a href="connact.html" class="outside" >
            <div class="outside1">
                <!--联系我们图片-->
                <img src="./images/icon_phone.png" alt="" class="img4">
                <p>联系我们</p>
            </div>
            <img src="./images/icon_more1.png" alt="" class="img2">
        </a>
        <!--修改密码-->
        <a href="updatepwd.html" class="outside" >
            <div class="outside1">
                <!--修改密码图片-->
                <img src="./images/icon_lock.png" alt="" class="img3">
                <p>修改密码</p>
            </div>
            <img src="./images/icon_more1.png" alt="" class="img2">
        </a>
        <!--检查更新-->
        <a href="javascript:void(0)" class="outside" @click="updata">
            <div class="outside1">
                <!--检查更新图片-->
                <img src="./images/icon_new.png" alt="" class="img1">
                <p>检查更新</p>
            </div>
            <img src="./images/icon_more1.png" alt="" class="img2">
        </a>
        <!--关于我们-->
        <a href="javascript:void(0)" class="outside" @click="about">
            <div class="outside1">
                <!--关于我们图片-->
                <img src="./images/icon_about.png" alt="" class="img1">
                <p>关于我们</p>
            </div>
            <img src="./images/icon_more1.png" alt="" class="img2">
        </a>
        <!--退出登录-->
        <a href="javascript:void(0)" class="outside" @click="logout()">
            <div class="outside1">
                <!--退出登录图片-->
                <img src="./images/icon_exits.png" alt="" class="img1">
                <p>退出登录</p>
            </div>
            <img src="./images/icon_more1.png" alt="" class="img2">
        </a>
    </div>
</main>
<footer>
    <div class="foot">
        <a href="homepage.html" >
            <img src="./images/icon_index.png" alt="首页">
            <span>首页</span>
        </a>
        <a href="cdisplay.html">
            <img src="./images/icon_show.png" alt="名片展示">
            <span>名片展示</span>
        </a>
        <a href="personal.html">
            <img src="./images/icon_my.png" alt="我的">
            <span>我的</span>
        </a>
    </div>
</footer>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
    const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
    new Vue({
        el:"#app",
        data:{
            tx:'',
            front:''
        },
        created(){
            this.gettx();//获取个人信息
        },
        methods:{
            // 获取个人信息
            gettx(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Login/getUserInfo')
                    .then(res=>{
                        this.tx = res.data.data;
                        this.front = this.tx.image;
                    })
            },
            //修改用户名
            upname(){
                var that = this;
                mui.prompt('请输入新用户名', '', '', new Array('取消', '确定'), function (Reason) {
                    if (Reason.index == 1) {
                        if (Reason.value != '') {
                            axios.post(API_PROXY + 'mingpian.32one.top/Index/Member/editName',`name=${Reason.value}`)
                                .then((res)=>{
                                    if (res.data.code == 0){
                                        that.tx.name = Reason.value;
                                        mui.toast(res.data.msg);
                                    }else{
                                        mui.toast(res.data.msg);
                                    }
                                },(err)=>{
                                    console.log(err)
                                })
                        }else {
                            mui.toast('用户名不能为空');
                        }

                    }
                });
            },
            // 修改头像
            uploads(event) {
                this.load = true;
                var paths = this.$refs.front.value; //源文件路径
                var fileType = this.getFileType(paths); //获取文件的后缀名
                if ("jpg" != fileType && "jpeg" != fileType && "png" != fileType) {
                    mui.toast("请上传JPG,JPEG,PNG格式的图片");
                    return false;
                }
                this.submit();
            },

            submit() {
                var DOM = this.$refs.front; //获取input dom节点
                var file = DOM.files[0]; //获取文件详细信息
                console.log(file);
                var param = new FormData();
                param.append('image', file);
                this.$nextTick(function (){
                    this.uploadImg(param);
                })
            },
            uploadImg(param) {
                console.log(param)
                axios.post( API_PROXY + "mingpian.32one.top/Index/Member/uploadImg", param)
                    .then((res) => {
                        console.log(res)
                         if (res.data.code == 0) {
                             // this.fronts = res.data.data;
                             // this.sc();
                         } else {
                             mui.toast(res.data.msg);
                         }
                     }, (err) => {
                         console.log(err)
                    })
            },

            getFileType(filePath) {
                var startIndex = filePath.lastIndexOf("."); //检测文件类型
                if (startIndex != -1)
                    return filePath.substring(startIndex + 1, filePath.length).toLowerCase();
                else return "";
            },

            // sc() {
            //     this.load = false;
            //     axios.post("/Home/Member/editimg", `imgFile=${this.fronts}`)
            //         .then(res => {
            //             mui.toast("头像修改成功");
            //             this.front = this.fronts;
            //         }, err => {
            //             mui.toast("头像修改失败");
            //         })
            // },
            // 检查更新
            updata(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Member/checkUpdate')
                    .then(res=>{
                        mui.toast(res.data.data.val,{ duration:'long', type:'div' })
                    })
            },
            // 关于我们
            about(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Member/about')
                    .then(res=>{
                        mui.toast(res.data.data.val,{ duration:'long', type:'div' })
                    })
            },
            //退出登录
            logout(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/logout')
                    .then(res=>{
                        if (res.data.code == 0){
                            window.location.href="login.html";
                        }
                    })
            }
        }
    })
</script>
</body>

</html>